<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page language="java" import="java.util.*"%>
<%@ page import="com.itr.kbm.model.SessionDataObject"%>

<%
	if (session.getAttribute("logindata") == null) {
		response.sendRedirect(request.getContextPath() + "/billing");
%>
<br />
<h4>
	You are not logged in !! Go to <a class=""
		href="${pageContext.request.contextPath}/billing/"> Register Page
	</a>
</h4>
<br />
<%
	} else {
		SessionDataObject object = (SessionDataObject) session
				.getAttribute("logindata");
%>
<div class="col-md-9">
	<%
		if (object.getTypeUser().equals("adminKoptelProduct")) {
	%>
		<div class="row">
			<form role="form" name="summary-form" id="summary-form"
				action="${pageContext.request.contextPath }/request-logout">
				<div class="form-group">
					<div class="col-md-9">
						<br />
						<h4>Hi, <%=object.getKodeKopeg()%> <%=object.getKodeKoptelProduct()%> !! ~ Welcome to
							Billing Management ~</h4>
					</div>
				</div>
				<div class="form-group">
					<div class="col-md-3">
						<input type="submit" id="show-report-button" name="submit"
							value="Log Out" class="form-control btn btn-default" />
					</div>
				</div>
			</form>
			<br /> <br />
			<h2>SUMMARIZE KOPTEL PRODUCT</h2>
		</div>

		<div class="row form-row">
			<form name="summary-form" class="form-inline" id="summary-form"
				action="${pageContext.request.contextPath }/request-report_koptel_product"
				role="form" method="post"
				enctype="application/x-www-form-urlencoded">
				<label>Select Report &nbsp; &nbsp;</label>

				<div class="form-group">
					<select name="month" class='form-control' id="month">
						<option value="1">January</option>
						<option value="2">February</option>
						<option value="3">March</option>
						<option value="4">April</option>
						<option value="5">May</option>
						<option value="6">June</option>
						<option value="7">July</option>
						<option value="8">August</option>
						<option value="9">September</option>
						<option value="10">October</option>
						<option value="11">November</option>
						<option value="12">December</option>
					</select>
				</div>

				<jsp:useBean id="now" class="java.util.Date" />
				<fmt:formatDate var="year" value="${now}" pattern="yyyy" />

				<div class="form-group">
					<select name="year" class="form-control" id="year">
						<c:forEach begin="0" end="4" varStatus="loop">
							<c:set var="currentYear" value="${year - loop.index}" />
							<option value="${currentYear}"
								${year == currentYear ? 'selected="selected"' : ''}>${currentYear}</option>
						</c:forEach>
					</select>
				</div>
				<div class="form-group">
					<input type="submit" id="show-report-button" name="submit"
						value="Show Report Koptel Product" class="btn btn-default" />
				</div>
			</form>
		</div>

		<br>
		<h2>${m } ${y }</h2>
		<br>
		<c:if test="${icon.equals('fail')}">

			<h5 style="color: red; border-style: solid;">
				<img
					src="${pageContext.request.contextPath}/assets/img/icon/fail.png"
					width="40px">${alert }
			</h5>
		</c:if>
		<c:if test="${icon.equals('success')}">

			<h5 style="color: green; border-style: solid;">
				<img
					src="${pageContext.request.contextPath}/assets/img/icon/success.png"
					width="40px">${alert }
			</h5>
		</c:if>

		<c:if test="${!empty report }">

			<form id="loading-form" name="loading-form"
				action="${pageContext.request.contextPath }/request-merge_product"
				role="form" method="post">
				<div class="form-group">
					<div class="col-md-9">
						<div class="panel panel-default" class="form-control">
							<div class="panel-body">
								<jsp:useBean id="nows" class="java.util.Date" />
								<h4>
									File Upload Status Until
									<fmt:formatDate type="date" value="${nows}" />
								</h4>

								<h5>
									<table>
										<tr>
											<td>Total</td>
											<td>&nbsp&nbsp:</td>
											<td>&nbsp ${totalKopeg } Koptel Product</td>
										</tr>
										<tr>
											<td>Success</td>
											<td>&nbsp&nbsp:</td>
											<td>&nbsp ${success } Koptel Product</td>
										</tr>
										<tr>
											<td>Failed / Not Yet</td>
											<td>&nbsp&nbsp:</td>
											<td>&nbsp ${failed } Koptel Product</td>
										</tr>
									</table>
								</h5>
							</div>
						</div>
					</div>
				</div>
				<input type="hidden" name="month" value="${month }" /> <input
					type="hidden" name="year" value="${y }" />
				<div class="form-group">
					<div class="col-md-3">
						<input type="submit" id="summarize-button" name="submit"
							value="Summarize & Download" class="form-control btn btn-default" />
					</div>
				</div>
			</form>
			<br />
			<br />
			<br />
			<div class="row table-row">
				<div class="input-group filter">
					<span class="input-group-addon">Filter</span> <input id="filter"
						type="text" class="form-control" placeholder="Type here...">
					<span class="input-group-btn"> </span>
				</div>
				<table class="table table-striped table-bordered table-condensed">
					<thead>
						<th>#</th>
						<th>Kode Koptel Product</th>
						<th>Type</th>
						<th>Date</th>
						<th>Status</th>
					</thead>
					<tbody class="searchable">

						<c:forEach items="${report }" var="report" varStatus="i">
							<tr class="${report.status}">
								<td>${i.count }</td>
								<td>${report.kodeKopeg }</td>
								<td>${report.type }</td>
								<td><fmt:formatDate type="date" value="${report.date}" /></td>
								<td>${report.status }</td>
							</tr>
						</c:forEach>


					</tbody>
				</table>
				<div class="pagination-page"></div>
			</div>
		</c:if>

	<% } %>
	<br />
</div>
<% } %>
<script type="text/javascript">
	jQuery(function($) {
		var items = $('.searchable tr');

		var numItems = items.length;
		var perPage = 10;

		items.slice(perPage).hide();

		$(".pagination-page").pagination({
			items : numItems,
			itemsOnPage : perPage,
			cssStyle : "light-theme",
			onPageClick : function(pageNumber) {
				var showFrom = perPage * (pageNumber - 1);
				var showTo = showFrom + perPage;

				items.hide().slice(showFrom, showTo).show();
			}
		});
	});
	
	$("form[name=loading-form]").submit(function(){
		showLoadingScreen();
		setTimeout(showTable,60000);
		return true;
	});

	$(document).ready(function() {
	
		$('#filter').keyup(function() {

			var rex = new RegExp($(this).val(), 'i');
			$('.searchable tr').hide();
			$('.searchable tr').filter(function() {
				return rex.test($(this).text());
			}).show();

		});
	});

	function showTable() {
		//$(".table-row").show();
		hideLoadingScreen();
	}
</script>
<style type="text/css">
h2 {
	border-radius: 4px 4px 0 0;
	padding: 10px 15px;
	font-size: 16px;
	margin: 0px;
	background-color: #27ae60;
	color: #fff;
}

.filter {
	margin: 15px 0 5px 0;
}

.form-row {
	background-color: #f3f3f3;
	padding: 15px;
	border-radius: 0 0 4px 4px;
}

.false td {
	background-color: #ff5e63 !important;
	color: #fff;
}
</style>